import { questionTypesApi } from '@/api'
import { QuestionTypeMap } from '@/utils/common'
import { Button } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import SelectItem from './components/SelectItem'
import './select.less'

const testTypes = [
  { key: '全部', value: 'all' },
  { key: '错误', value: 'err' },
  { key: '已做', value: 'done' },
  { key: '未做', value: 'notdone' },
]

const testNums = [
  { key: '5', value: "5" },
  { key: '10', value: "10" },
  { key: '20', value: "20" },
  { key: '30', value: "30" },
  { key: '50', value: "50" },
  { key: '100', value: "100" },
]

export default function Select() {

  const fn = (value: string) => {
    console.log(value)
  }

  const [questionTypes, setQuestionTypes] = useState<IKeyValue[]>([])

  const params = useParams<{ actionCode: string }>();
  useEffect(() => {
    // 在ts里面如果有一个数据，可能为空，我们可以先判断，再操作
    if (params.actionCode) {
      questionTypesApi(params.actionCode).then(res => {
        if (res.errCode === 0) {
          // 处理数据
          // 目标： [{key:中文+题目数量,value:英文}]
          // 现在的数据： [{key:英文,value:题目数量,sort:0}]
          // 思路： 1. 把英文 转换 成对应的 中文  2. 把英文放到 value
          const result = res.data.map(item => {
            return {
              key: QuestionTypeMap[item.key] + item.value,
              value: item.key
            }
          })
          // 渲染数据
          setQuestionTypes(result);
        }
      })
    }
  }, [])

  const nav = useNavigate()
  let testNum = 5;
  let testType = 'all'; // 试题分类
  let actionCode = params.actionCode;
  let questionType = 'all'; // 题目分类

  return (
    <div className='select'>
      <div>
        <Button color="primary" fill="solid" onClick={() => nav('/practice', {
          state: {
            testNum, testType, actionCode, questionType
          }
        })}>进入练习模式</Button>
      </div>
      {/* 试题分类 */}
      <SelectItem title='试题分类' list={testTypes} onChange={(val) => testType = val} />
      {/* 题目分类 */}
      <SelectItem title='题目分类' list={questionTypes} onChange={val => questionType = val} />
      {/* 做题数量 */}
      <SelectItem title='做题数量' list={testNums} onChange={val => testNum = parseInt(val)} />

    </div>
  )
}
